<template>
	<view>
		<view class="sign-card" v-for="(signInfo, index) in examineSignInfo" :key="index">
			<view class="sign-bg2"></view>
			<view class="sign-header">
				<view class="title-container">
					<view class="sign-title">{{ signInfo.department }}</view>
				</view>
				<view class="sign-status">待签到</view>
			</view>
			<view class="qrcode-box">
				<tkiQrcodeVue ref="qrcode" onval :val="signInfo.clinicNo" :size="300" :load-make="true"
					:show-loading="false" />
				<view class="clinic-no">门诊号：{{ signInfo.clinicNo }}</view>
			</view>
			<view class="dashed-divider"></view>
			<view class="sign-row">
				<view class="label">检查项目 ：</view>
				<view class="value">{{ signInfo.project }}</view>
			</view>
			<view class="sign-row">
				<view class="label">检查院区 ：</view>
				<view class="value">{{ signInfo.hospital }}</view>
			</view>
			<view class="sign-row">
				<view class="label">检查位置 ：</view>
				<view class="value start-center">
					<view>{{ signInfo.location }}</view>
					<image class="guidance-map-icon" src="/static/images/imgs/guidance-map-icon.png"></image>
				</view>
			</view>
			<view class="sign-row">
				<view class="label">检查室 ：</view>
				<view class="color-red ">{{ signInfo.room }}</view>
			</view>
			<view class="sign-row">
				<view class="label">预约时间 ：</view>
				<view class="value ">{{ signInfo.time }}</view>
			</view>
			<view class="sign-row">
				<view class="label">检查序号 ：</view>
				<view class="value " v-if="signInfo.ordinal">{{ signInfo.ordinal }}</view>
				<view class="value " v-else>签到成功后，可以查看就诊序号</view>
			</view>
			<view class="sign-row">
				<view class="label">注意事项 ：</view>
				<view class="value">
					<view v-if="!signInfo.showFullNotice && signInfo.notice && signInfo.notice.length > 18">
						{{ signInfo.notice.slice(0, 13) }}...
						<text class="show-more" @click="toggleNotice(index)">查看全部</text>
					</view>
					<view v-else>
						{{ signInfo.notice }}
						<text v-if="signInfo.notice && signInfo.notice.length > 18" class="show-more"
							@click="toggleNotice(index)">收起</text>
					</view>
				</view>
			</view>
			<ButtonVue content="立即签到"></ButtonVue>
		</view>
	</view>
</template>

<script>
	import tkiQrcodeVue from '../../../../../components/QrCode/tki-qrcode.vue';
	export default {
		components: {
			tkiQrcodeVue
		},
		props: {
			examineSignInfo: {
				type: Array,
				default: () => []
			},
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {

			},
			toggleNotice(index) {
				this.$set(this.inspectionSignInfo[index], 'showFullNotice', !this.inspectionSignInfo[index]
					.showFullNotice);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sign-card {
		// background: #fff;
		background-image: url("/static/images/imgs/sign-bg.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		border-radius: 16rpx;
		// margin: 25rpx 0 0 0;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
		padding: 24rpx 32rpx 18rpx 32rpx;
		position: relative;
	}

	.sign-bg2 {
		position: absolute;
		background-image: url("/static/images/imgs/sign-bg2.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 70px;
		height: 64px;
		right: 0;
	}

	.sign-header {
		display: flex;
		align-items: center;
		margin-bottom: 18rpx;
	}

	.title-container {
		flex: 1;
		position: relative;
	}

	.sign-title {
		font-size: 32rpx;
		color: #333;
		position: relative;
		z-index: 1;
	}


	.sign-status {
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 16px;
		color: #EA0000;
		line-height: 15px;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin-right: 70px;
	}

	.qrcode-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 40rpx 0 20rpx;
	}

	.qrcode {
		width: 160rpx;
		height: 160rpx;
		margin-bottom: 10rpx;
	}

	.clinic-no {
		color: #888;
		font-size: 28rpx;
		margin: 10px 0;
	}

	.dashed-divider {
		height: 1rpx;
		border-top: 1rpx dashed #e0e0e0;
		margin: 18rpx 0 18rpx 0;
		width: 100%;
	}

	.sign-row {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.label {
		color: #888;
		font-size: 28rpx;
		width: 160rpx;
	}

	.value {
		color: #333;
		font-size: 28rpx;
		flex: 1;
	}

	.value.vital {
		color: #ca3333;
		font-size: 28rpx;
		flex: 1;
	}

	.nav-btn {
		background: #e0f3ff;
		color: #1ec6e6;
		font-size: 22rpx;
		border-radius: 24rpx;
		padding: 0 18rpx;
		height: 40rpx;
		line-height: 40rpx;
		border: none;
		margin-left: 12rpx;
	}

	.show-more {
		color: #1ec6e6;
		margin-left: 8rpx;
		font-size: 24rpx;
	}

	.sign-btn {
		width: 90%;
		margin: 30rpx 5% 0 5%;
		height: 72rpx;
		background: linear-gradient(90deg, #6ed6f7 0%, #3ec6e7 100%);
		color: #fff;
		font-size: 30rpx;
		border-radius: 44rpx;
		text-align: center;
		line-height: 72rpx;
		box-shadow: 0 4rpx 12rpx rgba(65, 207, 230, 0.15);
		border: none;
		margin-bottom: 12rpx;
	}

	.guidance-map-icon {
		width: 18px;
		height: 18px;
		margin: 5px;
	}
</style>